<template>
  <view class="w-[750rpx] min-h-screen bg-gray-50">
    <!-- Header with Back Button -->
    <view class="bg-white px-[32rpx] py-[24rpx] shadow-sm flex items-center">
      <IconFont name="left" size="24" class="text-gray-600 mr-[16rpx]" @click="goBack" />
      <text class="text-[32rpx] font-bold text-gray-800">分类一</text>
    </view>

    <!-- Content Area -->
    <view class="p-[32rpx]">
      <!-- Feature Cards -->
      <view class="space-y-[24rpx]">
        <view 
          v-for="feature in features" 
          :key="feature.id"
          class="bg-white rounded-[16rpx] p-[32rpx] shadow-sm"
          @click="handleFeatureClick(feature)"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] bg-blue-100 rounded-[12rpx] flex items-center justify-center mr-[24rpx]">
                <IconFont :name="feature.icon" size="32" class="text-blue-500" />
              </view>
              <view>
                <text class="text-[32rpx] font-bold text-gray-800 block">{{ feature.title }}</text>
                <text class="text-[24rpx] text-gray-500 mt-[8rpx]">{{ feature.description }}</text>
              </view>
            </view>
            <IconFont name="right" size="16" class="text-gray-400" />
          </view>
        </view>
      </view>

      <!-- Sub Navigation -->
      <view class="mt-[48rpx]">
        <text class="text-[28rpx] font-bold text-gray-800 mb-[24rpx] block">子功能</text>
        <view class="bg-white rounded-[16rpx] overflow-hidden">
          <view 
            v-for="subItem in subItems" 
            :key="subItem.id"
            class="flex items-center justify-between px-[32rpx] py-[28rpx] border-b border-gray-100 last:border-b-0"
            @click="navigateToSub(subItem.path)"
          >
            <view class="flex items-center">
              <IconFont :name="subItem.icon" size="24" class="text-gray-600 mr-[16rpx]" />
              <text class="text-[28rpx] text-gray-800">{{ subItem.title }}</text>
            </view>
            <view class="flex items-center">
              <text class="text-[24rpx] text-gray-400 mr-[8rpx]">{{ subItem.count }}</text>
              <IconFont name="right" size="16" class="text-gray-400" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

interface Feature {
  id: number
  title: string
  description: string
  icon: string
  action: string
}

interface SubItem {
  id: number
  title: string
  icon: string
  count: string
  path: string
}

const features = ref<Feature[]>([
  {
    id: 1,
    title: '主要功能',
    description: '这是主要功能的详细描述',
    icon: 'star',
    action: 'main'
  },
  {
    id: 2,
    title: '辅助功能',
    description: '这是辅助功能的详细描述',
    icon: 'setting',
    action: 'assist'
  }
])

const subItems = ref<SubItem[]>([
  {
    id: 1,
    title: '子功能 1-1',
    icon: 'list',
    count: '12',
    path: '/views/sub1-1'
  },
  {
    id: 2,
    title: '子功能 1-2',
    icon: 'edit',
    count: '8',
    path: '/views/sub1-2'
  },
  {
    id: 3,
    title: '子功能 1-3',
    icon: 'search',
    count: '5',
    path: '/views/sub1-3'
  }
])

const goBack = () => {
  Taro.navigateBack()
}

const handleFeatureClick = (feature: Feature) => {
  Taro.showToast({
    title: `点击了${feature.title}`,
    icon: 'success',
    duration: 1500
  })
}

const navigateToSub = (path: string) => {
  Taro.navigateTo({
    url: path,
    success: () => {
      Taro.showToast({
        title: '跳转成功',
        icon: 'success',
        duration: 1500
      })
    },
    fail: () => {
      Taro.showToast({
        title: '跳转失败',
        icon: 'error',
        duration: 1500
      })
    }
  })
}
</script>